<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <div *ngIf="!isEdit">
    <button (click)="add()" nz-button nzType="primary" class="m-r-8">
      <i nz-icon nzType="plus"></i>
      新建
    </button>
    <app-card-table-wrap [tableTitle]="'账号列表'" (reload)="reloadTable()" >
      <app-ant-table
        (changePageSize)="changePageSize($event)"
        (changePageNum)="getDataList($event)"
        [tableConfig]="tableConfig"
        [tableData]="dataList"
      ></app-ant-table>
    </app-card-table-wrap>
  </div>
  <div *ngIf="isEdit">
    <nz-card nzTitle="BasicButton Types" [nzBordered]="true">
      <form nz-form [formGroup]="addEditForm">
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="parentId">{{ 'common.name' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <nz-tree-select [nzNodes]="deptNodes" nzShowSearch [nzDropdownMatchSelectWidth]="true" nzPlaceHolder="Please select" formControlName="parentId"></nz-tree-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="typeId">{{ 'admin.service-type' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <!-- nzMode="multiple" -->
            <nz-select formControlName="typeId" nzPlaceHolder="{{ 'admin.service-type' | translate }}">
              <nz-option *ngFor="let option of serviceTypeOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="typeId">{{ 'admin.service-type' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <!-- nzMode="multiple" -->
            <nz-select formControlName="typeId" nzPlaceHolder="{{ 'admin.service-type' | translate }}">
              <nz-option *ngFor="let option of serviceTypeOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="telephone">{{ 'admin.criticality' | translate }}</nz-form-label>
          <nz-select formControlName="criticality" nzPlaceHolder="{{ 'admin.service-type' | translate }}">
            <nz-option *ngFor="let option of criticalityOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
          </nz-select>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="internalNote">{{ 'admin.internalNote' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <input nz-input formControlName="internalNote" id="internalNote" placeholder="手机号" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="validId">状态</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <nz-switch formControlName="validId" nzCheckedChildren="{{ 'admin.valid' | translate }}" nzUnCheckedChildren="{{ 'admin.invalid' | translate }}"></nz-switch>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="externalNote">{{ 'admin.externalNote' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <input nz-input formControlName="externalNote" id="externalNote" placeholder="{{ 'admin.externalNote' | translate }}" />
          </nz-form-control>
        </nz-form-item>
      
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="comment">{{ 'admin.comment' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="combineTpl">
            <input nz-input formControlName="comment" id="comment" placeholder="{{ 'admin.comment' | translate }}" />
          </nz-form-control>
        </nz-form-item>
      </form>
      <ng-template #combineTpl let-control>
        <ng-container *ngIf="control.hasError('message')">{{ control.errors.message }}</ng-container>
        <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
      </ng-template>
    </nz-card>
  </div>
</div>